<!DOCTYPE html>
<html>
  <head>
    <title>Hello, sort!</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

html, body, svg {
  font: 14px Helvetica Neue;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}

circle {
  fill: steelblue;
  fill-opacity: .8;
  stroke: #fff;
}

div {
  position: fixed;
  top: 10px;
  left: 10px;
}

    </style>
  </head>
  <body>
    <div>
      <input id="sort" type="checkbox" checked>
      <label for="sort">Ascending</label>
    </div>
    <script type="text/javascript">

d3.select("body")
  .append("svg:svg")
    .attr("viewBox", "0 0 1000 1000");

d3.select("#sort")
    .on("change", sort);

transform();

function transform() {
  var circle = d3.select("svg")
    .selectAll("circle")
      .data(d3.range(400).map(Math.random));

  circle.enter().append("svg:circle")
      .attr("cx", function() { return 100 + Math.random() * 800; })
      .attr("cy", function() { return 100 + Math.random() * 800; })
      .attr("r", function(d) { return 50 * d; });

  circle
    .transition()
      .duration(750)
      .attr("r", function(d) { return 50 * d; });

  sort();
}

function sort() {
  d3.selectAll("circle")
      .sort(d3.select("#sort").property("checked")
      ? function(a, b) { return b - a; }
      : function(a, b) { return a - b; });
}

window.addEventListener("keypress", transform, false);

    </script>
  </body>
</html>
